<template>
  <div class="centextBar" id="banner" style="min-height: 100%;">
    <div class="title">
      <div class="title"><strong>企业用户列表</strong></div>
      <div class="buttonBar float-right">
        <button type="button" class="btn"
                style="margin-right:30px;color: #5bc590; background-color: #fff; border-color: #5bc590;"
                @click="addBanner">+新增用户
        </button>
      </div>
      <hr style="width: 100%; height: 1px; background-color: #ccc"/>
      <div class="buttonBar float-left" style="vertical-align:baseline;">
        <span>登录名：</span>
        <input v-model="usernameComtent" type="text" class="searchTxt" id="searchUserNameBar" value="" placeholder=""/>
        <span>用户姓名：</span>
        <input v-model="displayNameComtent" type="text" class="searchTxt" id="searchDisplayNameBar" value=""
               placeholder=""/>
        <div id="queryBt" style="margin-left:25px;margin-top: 22px;" @click="getBanner">查询</div>
      </div>
      <div id="queryBtClear" class="qbc" @click="clearContent">查询重置</div>
      <div class="clear"></div>
    </div>
    <div class="tableBox" style="height:100%">
      <table class="table table-striped">
        <thead>
        <tr>
          <th width="5%">序号</th>
          <th width="15%">登录名</th>
          <th width="15%">用户姓名</th>
          <th width="15%">联系电话</th>
          <th width="15%">状态</th>
          <th width="15%">创建时间</th>
          <th width="10%">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="line in bannerList">
          <td>1</td>
          <td>{{line.userName}}</td>
          <td>
            {{line.displayName}}
          </td>
          <td>{{line.phoneNumber}}</td>
          <td v-show="line.status === 'EFFECT'" style="color: #28b855;">有效</td>
          <td v-show="line.status === 'LOSE_EFFECT'" style="color: #ed3a3a;">无效</td>
          <!--  <td style="color: #ed3a3a;">无效</td>-->
          <td>
            {{line.createTime}}
          </td>
          <td><a @click="showDetails" style="color:#50e392" href="javascript:void(0)">查看详情</a></td>
        </tr>
        </tbody>
      </table>
      <div class="loading">
        正在加载...
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    mounted() {
      this.getBanner()
    },
    name: "banner",
    data() {
      return {
        bannerList: [{
          userName: 'admin',
          displayName: '超级管理员',
          phoneNumber: '123455678901',
          createTime: '2017-12-14 12：00：00',
          status: 'EFFECT'
        }],
        createTime: '0000-00-00 10:10:10',
        usernameComtent: '',
        displayNameComtent: '',
      }
    },
    methods: {
      getBanner() {
        var self = this
        let params = {
          pageSize: '',
          currentPage: '',
          username: this.usernameComtent,
          displayName: this.displayNameComtent,
        }
        self.$http.post('api/system/users', params)
          .then((response) => {
            // 响应成功回调
            console.log(response)
            if (!response.error) {
              console.log(response.result)
              for (var i = 0; i < response.result.length; i++) {
                response.result[i].createTime = response.result[i].createTime.substring(-1, 19)
              }
              this.bannerList = response.result;
            }
          })
          .then((response) => {
            console.log(response)
          })
          .catch((reject) => {
            console.log(reject)
          })
      },
      addBanner() {
        var self = this
        self.$router.push({
          path: '/banner_edit'
        })
      },
      showDetails() {
        var self = this
        self.$router.push({
          path: '/banner_details'
        })
      },
      clearContent() {
        this.usernameComtent = "";
        this.displayNameComtent = ""
      }
    },
  }
</script>
<style scoped>
  .qbc {
    font-size: 16px;
    font-weight: lighter;
    line-height: 35px;
    color: #fff;
    background: #5bc590;
    text-align: center;
    border-radius: 5px;
    float: left;
    width: 100px;
    ine-height: 35px;
    height: 35px;
    cursor: pointer;
    margin-top: 22px;
    margin-left: 25px;
  }
</style>
